<script setup>
import { ref,defineProps, onMounted} from 'vue'
import * as echarts from 'echarts';

const chart = ref(null);
const xAxisData= ['重复2次', '重复3次', '重复4次']
const colorArr= ['#183d8b', '#347be3', '#133074','#29F1FA']
const barWidth= 16
const data1= [230, 300, 250]
const bottomData= [1, 1, 1]
const topData= [245, 315, 265]
const topData2= [245, 315, 265]
const data2= [245, 315, 265]
const names= ["单位：个"]



onMounted(() => {
  let color = {
    type: 'linear',
    x: 0,
    x2: 1,
    y: 1,
    y2: 1,
    colorStops: [
        {
            offset: 0,
            color: colorArr[0]
        },
        {
            offset: 0.5,
            color: colorArr[0]
        },
        {
            offset: 0.5,
            color: colorArr[1]
        },
        {
            offset: 1,
            color: colorArr[1]
        }
    ]
  }
  let color2 = {
    type: 'linear',
    x: 0,
    x2: 1,
    y: 0,
    y2: 1,
    colorStops: [
        {
            offset: 0,
            color: '#ffffff'
        },
        // {
        //     offset: 0.5,
        //     color: colorArr[0]
        // },
        {
            offset: 0.4,
            color: colorArr[1]
        },
        {
            offset: 1,
            color: '#000000'
        }
    ]
  }
  const chartDom = echarts.init(chart.value);
  chartDom.setOption(
    {
      title: {
        text: '单位：个',
        textStyle:{
          color:'rgba(255,255,255,0.5)',
          fontSize:8,
        },
      },
      tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.6)',
          borderColor: 'rgba(255,255,255,0.7)',
          borderWidth:2,
          textStyle:{
            color:'#fff'
          },
          formatter: function (params) {
              var str = params[0].name + ':'
              params.filter(function (item) {
                  if (item.componentSubType == 'bar' && item.seriesName === '数据') {
                      str += item.value
                  }
              })
              return str
          }
      },
      grid: {
          left: '0%',
          right: '5%',
          bottom: '3%',
          top:'18%',
          containLabel: true
      },
      xAxis: [
          {
              type: 'category',
              // name: names[0],
              // boundaryGap: [0, '30%'],
              data: xAxisData,
              // 更改坐标轴颜色
              axisTick: {
                show: false
              },
              axisLabel: {
                color:'rgba(149,209,255,0.7)'
              },
              
              axisLine:{
                lineStyle:{
                  color:'#3372D5'
                  // color: 'rgba(149,209,255,0.7)'
                }
              },

          }
      ],
      yAxis: [
          {
              // type: 'value',
              // name: '单位：个',
              // axisLabel: {
              //     formatter: '{value}',
              //     textStyle:{
              //     color:'rgba(255,255,255,0.5)',
              //     fontSize:8,
              //   },
              // },
              splitNumber:3,
              // 更改坐标轴颜色
              axisLabel: {
                color: 'rgba(255,255,255,0.5)',
              },
              // 网格线
              splitLine: {
                lineStyle:{color: '#3372D5',opacity:0.4}
              }
          }
      ],
      series: [
          // 数据低下的圆片
          // {
          //     name: '',
          //     type: 'pictorialBar',
          //     symbolOffset: ['0%', '50%'],
          //     symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
          //     z: 12,
          //     symbol: 'diamond',
          //     itemStyle: {
          //         opacity: 1,
          //         color: color
          //         // color: 'transparent'
          //     },
          //     data: bottomData
          // },
          // 数据的柱状图
          {
              name: '数据',
              type: 'bar',
              barWidth: barWidth,
              itemStyle: {
                  // lenged文本
                  opacity: 1, // 这个是 透明度
                  color: color
              },
              z:13,
              data: data1
          },

          {
              name: '数据2',
              type: 'bar',
              // barGap: '-150%',
              barWidth: barWidth,
              itemStyle: {
                  // lenged文本
                  opacity: 0.3, // 这个是 透明度
                  color: color2
              },
              z:14,
              data: data1
          },
          // 替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20
          // {
          //     type: 'bar',
          //     symbol: 'diamond',
          //     barWidth: barWidth + 2,
          //     itemStyle: {
          //         color: 'transparent'
          //     },
          //     data: data1
          // },
          // 数据顶部的样式
          {
              name: '',
              type: 'pictorialBar',
              symbol: 'diamond',
              symbolOffset: ['0%', '-50%'],
              symbolSize: [barWidth, 8],
              z: 16,
              itemStyle: {
                  normal: {
                      opacity: 1,
                      color: '#67d8f8',
                      // label: {
                      //     show: true, // 开启显示
                      //     position: 'top', // 在上方显示
                      //     textStyle: {
                      //         // 数值样式
                      //         color: '#FFFFFF',
                      //         fontSize: 12,
                      //         top: 50
                      //     }
                      // }
                  }
              },
              symbolPosition: 'end',
              data: data1
          },
          {
              name: '',
              type: 'pictorialBar',
              symbol: 'diamond',
              symbolOffset: ['0%', '-50%'],
              symbolSize: [barWidth, 8],
              z: 16,
              itemStyle: {
                  normal: {
                      opacity: 1,
                      color: colorArr[3],
                      // label: {
                      //     show: true, // 开启显示
                      //     position: 'top', // 在上方显示
                      //     textStyle: {
                      //         // 数值样式
                      //         color: '#FFFFFF',
                      //         fontSize: 12,
                      //         top: 50
                      //     }
                      // }
                  }
              },
              symbolPosition: 'end',
              data: data2
          },

          // 阴影的顶部
          {
              name: '', // 头部
              type: 'pictorialBar',
              symbol: 'diamond',
              symbolOffset: ['0%', '-50%'],
              symbolSize: [barWidth, 8],
              z: 15,
              symbolPosition: 'end',
              itemStyle: {
                  color: '#67d8f8',
                  opacity: 0.3,
                  borderWidth: 1,
                  // borderColor: 'rgba(18, 47, 133,1)'
              },
              data: topData
          },
          // 后面的背景
          {
              name: '',
              type: 'bar',
              barWidth: barWidth,
              barGap: '-100%',
              z: 0,
              itemStyle: {
                  color: '#67d8f8'
              },

              data: topData
          }
      ]
    }
  )
 

})
</script>

<template>
 <div class="chartBox" ref="chart"></div>
</template>

<style scoped>
.chartBox{
  width: 100%;
  height: 100%;
  padding:10px;
}
</style>
